<template>
	<div>
		<el-card>
			<div>
				<el-button type="success" @click="addFn">新增</el-button>
			</div>
			<el-form :model="datas.setForm" label-width="120" ref="setForm_ref">
				<el-table :data="datas.setForm.dataTab" style="width: 100%" :height="datas.setForm.dataTab.length >= 10 ? '370' : 'auto'" class="main_tab">
					<template #default>
						<el-table-column prop="apiType" min-width="100" header-align="center" align="center" label="服务类型">
							<template #default="scope">
								<el-form-item :prop="'dataTab.' + scope.$index + '.apiType'" :rules="datas.rules.apiType">
									<DicSelect v-model="scope.row.apiType" placeholder="服务类型" dicCode="apiType" style="width: 100%"></DicSelect>
								</el-form-item>
							</template>
						</el-table-column>

						<el-table-column prop="apiUrl" min-width="100" header-align="center" align="center" label="接口地址">
							<template #default="scope">
								<el-form-item :prop="'dataTab.' + scope.$index + '.apiUrl'" :rules="datas.rules.apiUrl">
									<el-input v-model="scope.row.apiUrl" placeholder="接口地址"></el-input>
								</el-form-item>
							</template>
						</el-table-column>

						<el-table-column prop="apiMethod" min-width="100" header-align="center" align="center" label="请求方法">
							<template #default="scope">
								<el-form-item :prop="'dataTab.' + scope.$index + '.apiMethod'">
									<el-radio-group v-model="scope.row.apiMethod">
										<el-radio-button label="get" value="get" />
										<el-radio-button label="post" value="post" />
									</el-radio-group>
								</el-form-item>
							</template>
						</el-table-column>

						<el-table-column prop="apiHeadScript" min-width="100" header-align="center" align="center" label="请求头脚本">
							<template #default="scope">
								<el-form-item :prop="'dataTab.' + scope.$index + '.apiHeadScript'" :rules="datas.rules.apiHeadScript">
                  <el-popover  placement="bottom-start" :width="'80%'" trigger="click" ref="Headpopover">
                    <h5>请求头脚本</h5>
										<div style="text-align: right; margin: 0">
                      <aceEdit ref='apiHeadEdit' mode='JSON'></aceEdit>
											<el-button size="small" text @click="Headcancel">取消</el-button>
											<el-button size="small" type="primary" @click="HeadconfirmFn(scope.row)">确定</el-button>
										</div>
										<template #reference>
											<el-input v-model="scope.row.apiHeadScript" placeholder="请求头脚本" :readonly='true' @click="HeadInputClick(scope.row)"></el-input>
										</template>
									</el-popover>
								</el-form-item>
							</template>
						</el-table-column>

						<el-table-column prop="apiBodyScript" min-width="100" header-align="center" align="center" label="请求体脚本">
							<template #default="scope">
								<el-form-item :prop="'dataTab.' + scope.$index + '.apiBodyScript'" :rules="datas.rules.apiBodyScript">
									<el-popover trigger="click" ref="Bodypopover" placement="bottom-start" :width="'80%'">
                    <h5>请求体脚本</h5>
										<div style="text-align: right; margin: 0">
                      <aceEdit ref='apiBodyEdit' mode='JSON'></aceEdit>
											<el-button size="small" text @click="Bodycancel">取消</el-button>
											<el-button size="small" type="primary" @click="BodyconfirmFn(scope.row)">确定</el-button>
										</div>
										<template #reference>
											<el-input v-model="scope.row.apiBodyScript" placeholder="请求体脚本" :readonly='true' @click="BodyInputClick(scope.row)"></el-input>
										</template>
									</el-popover>
								</el-form-item>
							</template>
						</el-table-column>

						<el-table-column fixed="right" header-align="center" align="center" label="操作">
							<template #default="scope">
								<el-button type="primary" link @click="deleteHandle(scope.$index)">删除</el-button>
							</template>
						</el-table-column>
					</template>
				</el-table>
			</el-form>
		</el-card>
	</div>
</template>

<script setup lang="ts" name='setApi'>
import { ref, reactive, onMounted, defineExpose } from 'vue';
import { getDataDictionaryList } from '/@/utils/cacheDic';
import { parseScript } from '/@/utils/scriptParser';
import aceEdit from '/@/components/aceEditor/index.vue';
const setForm_ref = ref();
const apiBodyEdit = ref();
const apiHeadEdit = ref()
const Headpopover = ref()
const Bodypopover = ref()
const validHead = (rule: any, value: any, callback: any) => {
	try {
		parseScript(value || '', '');
		callback();
	} catch (e) {
		callback(`内容格式无效`);
	}
};
const datas = reactive({
	setForm: {
		dataTab: [] as any,
	},
	dataDictionaryList: {},
	rules: {
		apiType: [{ required: true, message: '请选择服务类型', trigger: 'change' }],
		apiUrl: [{ required: true, message: '请输入接口地址', trigger: 'change' }],
		apiHeadScript: [
			{ required: false, message: '请输入', trigger: 'change' },
			{ validator: validHead, trigger: 'change' },
		],
		apiBodyScript: [
			{ required: false, message: '请输入', trigger: 'change' },
			{ validator: validHead, trigger: 'change' },
		],
	},
});

onMounted(() => {
	// 数据字典
	getDataDictionaryList(datas.dataDictionaryList, ['apiType']);
});

const HeadconfirmFn = (row: any) => {
  row.apiHeadScript = apiHeadEdit.value.aceEditor.getValue()
  Headpopover.value.hide()
}

const Headcancel = () => {
  Headpopover.value.hide()
}

const HeadInputClick = (row: any) => {
  apiHeadEdit.value.aceEditor.setValue(row.apiHeadScript)
}

const BodyconfirmFn = (row: any) => {
  row.apiBodyScript = apiBodyEdit.value.aceEditor.getValue()
  Bodypopover.value.hide()
}
const Bodycancel = () => {
  Bodypopover.value.hide()
}

const BodyInputClick = (row: any) => {
  apiBodyEdit.value.aceEditor.setValue(row.apiBodyScript)
}

const addFn = () => {
	let obj = {
		apiType: '',
		apiUrl: '',
		apiMethod: 'get',
		apiHeadScript: '',
		apiBodyScript: '',
		// apiHead: '',
		// apiBody: '',
	};
	datas.setForm.dataTab.push(obj);
};

const deleteHandle = (index: String | Number) => {
	datas.setForm.dataTab.splice(index, 1);
};

defineExpose({
	datas,
	setForm_ref,
});
</script>

<style scoped>
.sub_btn {
	margin: 15px 0;
	text-align: center;
}
.main_tab ::v-deep .el-table__body-wrapper {
	height: auto !important;
}
.main_tab ::v-deep .el-table__row .el-form-item .el-form-item__content {
	margin-left: 20px !important;
	/* margin-bottom: 20px !important; */
}
</style>